<template>
  <div class="box">
    <header class="header">
      <van-sticky>
        <van-nav-bar
          left-arrow
          @click-left="$router.go(-1)"
          @click-right="onClickRight"
        >
          <van-icon slot="right" name="ellipsis" size="0.27rem" color="#000" />
        </van-nav-bar>
      </van-sticky>
      <PostList :postlist="list" :loading="loading" :goComment="getFocus" />
      <div style="height: 0.085rem; width: 100%; background-color: #F6F7F9;"></div>
      <!-- 评论 -->
      <div class="comment">
        <h3 class="title">全部评论</h3>
        <!-- 评论组件 -->
        <Comment :loading="loading" :getFocus="getFocus" />
      </div>
      <div class="comment-input">
        <input type="text" id="pl" placeholder="献上你的热评" v-model="myCommentText" />
        <span>发表</span>
      </div>
      <van-action-sheet v-model="show" :round="false" cancel-text="取消"  @cancel="onCancel" @select="onSelect" :actions="actions" />
    </header>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sticky, NavBar, Icon, ActionSheet, Toast } from 'vant'
import PostList from '@/components/community/postList'
import Comment from '@/components/community/comment'

Vue.use(Sticky)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(ActionSheet)
Vue.use(Toast)

export default {
  components: {
    PostList,
    Comment
  },
  data () {
    return {
      myCommentText: '',
      commentShow: false,
      show: false,
      actions: [
        { name: '举报', color: '#1C1C1C' }
      ],
      loading: true,
      list: [{ id: 1, nickname: '霍斯特哥若1', time: '04-21 21:32', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡记账打卡记账打卡记账打卡记账打卡记账打卡', zf: 20, pl: 32, dz: 55, xz: 1, gz: 0, sc: 0 }]
    }
  },
  mounted () {
    this.loading = false
  },
  methods: {
    getFocus () {
      document.getElementById('pl').focus()
    },
    onSelect (item) {
      if (item.name === '举报') {
        this.actions = [
          { name: '内容侵权', color: '#1C1C1C' },
          { name: '违法有害信息', color: '#1C1C1C' },
          { name: '垃圾广告营销', color: '#1C1C1C' },
          { name: '污秽色情内容', color: '#1C1C1C' },
          { name: '不实信息', color: '#1C1C1C' },
          { name: '不友善内容', color: '#1C1C1C' },
          { name: '其他', color: '#1C1C1C' }
        ]
      } else {
        // 发请求
        this.show = false
        setTimeout(() => {
          this.actions = [{ name: '举报', color: '#1C1C1C' }]
        }, 300)
      }
    },
    onCancel () {
      this.show = false
      Toast('cancel')
    },
    onClickRight () {
      this.show = true
    }
  },
  directives: {
    focus: {
      inserted (el, { value }) {
        if (value) {
          el.focus()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/postdetails.scss';
</style>
